import React, { memo, useEffect, useRef } from 'react';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';

import { Carousel } from 'antd';

import MusicThemeHeaderRcm from '@/components/theme-header-rcm';
import MusicAlbumCover from '@/components/album-cover';

import {
    NEW_ALBUM_PAGE_NUM,
    NEW_ALBUM_PER_PAGE
} from '@/common/contants';

import { getNewAlbumAction } from '../../store/actionCreators';


import { AlbumWrapper } from './style';


export default memo(function MusicNewAlbum() {

    const pageRef = useRef();
    
    const { newAlbums } = useSelector(state => ({
        newAlbums: state.getIn(['recommend','newAlbums'])
    }), shallowEqual);


    const dispatch = useDispatch();

    useEffect(() =>{
        dispatch(getNewAlbumAction(10));

    }, [dispatch]);

    return (
        <AlbumWrapper>
           <MusicThemeHeaderRcm title="新碟上架" />
           <div className="content">
               <button className="arrow sprite_02 arrow-left" onClick={e => pageRef.current.prev()}></button>
               <div className="album">
                   <Carousel dots={false} ref={pageRef}>
                    {
                       [0,1].map(item => {
                           return (
                               <div key={item} className="page">
                                {
                                    newAlbums.slice(item*NEW_ALBUM_PER_PAGE, (item + NEW_ALBUM_PER_PAGE)*NEW_ALBUM_PER_PAGE).map(iten => {
                                        return <MusicAlbumCover key={iten.id} info={iten} size={100} width={118} bgp="-570px" />
                                    })
                                }
                               </div>
                           )
                       })
                    }  
                   </Carousel>
               </div>
               <button className="arrow sprite_02 arrow-right" onClick={e => pageRef.current.next()}></button>
           </div>
        </AlbumWrapper>
    );
})